<template>
  <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <Select v-model="condition.typeid" clearable placeholder="请选择租赁物品类型" class="search-col" @on-change="change1" style="width:200px">
          <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <!-- <Select v-model="condition.areaid" clearable placeholder="请选择所属租赁点区域" class="search-col" @on-change="change2" style="width:200px">
          <Option v-for="item in areaList" :value="item.id" :key="item.id">{{ item.areaname }}</Option>
        </Select>
        <Select v-model="condition.bid" clearable placeholder="请选择租赁点" class="search-col" @on-change="change3" style="width:200px">
          <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
        </Select> -->
        <Input clearable placeholder="输入租赁物品名称搜索" class="search-input" v-model="condition.name"/>
        <Button class="search-btn" type="primary" @click="List">搜索</Button>
      </div>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="vivisle=true">新增租赁物品</Button>
      </div>
    </div>
    <tables ref="tables" editable :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="pageSize" @pageNum="pageNum"/>
    <br/>
    <Modal title="库存"
        width="700"
        v-model="stockShow" @on-cancel="stockShow=false">
        <tables ref="tables1"  :pageShow="false" editable :border="true" v-model="tableData1" :columns="columns1"/>
        <div slot="footer">
          <Button type="primary" size="large" @click="stockShow=false">确定</Button>
        </div>
    </Modal>
    <Modal
        title="租赁物品管理"
        v-model="vivisle"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItem')"
        class-name="vertical-center-modal">
        <Form ref="tableItem" :model="tableItem" :rules="ruleValidate" :label-width="80">
          <FormItem label="类型" prop="typeid">
            <Select v-model="tableItem.typeid" clearable :label-in-value="true" placeholder="请选择类型" size="large" style="width:200px" @on-change="change01">
              <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <!-- <FormItem label="所属租赁点" prop="areaid">
            <Select v-model="tableItem.areaid" clearable :label-in-value="true" placeholder="请选择所属租赁点" size="large" style="width:200px" @on-change="change02">
                <Option v-for="item in areaList" :value="item.id" :key="item.id">{{ item.areaname }}</Option>
            </Select>
          </FormItem>
          <FormItem label="商家" prop="bid">
            <Select v-model="tableItem.bid" clearable :label-in-value="true" placeholder="请选择商家" size="large" style="width:200px" @on-change="change03">
                <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
            </Select>
          </FormItem> -->
          <FormItem label="名称" prop="name">
              <Input v-model="tableItem.name" placeholder="请输入租赁物品分类"></Input>
          </FormItem>
          <FormItem label="图片" prop="pic">
            <div class="demo-upload-list"  v-if="tableItem.pic">
                <img :src="tableItem.pic">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(tableItem.pic)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                </div>
            </div>
            <Upload v-else
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                type="drag"
                action="http://59.110.234.118:9100/uploadImgs/upload?path=admin/other"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                </div>
            </Upload>
            <Modal title="图片查看" v-model="visibleImg">
                <img :src="tableItem.pic" v-if="visibleImg" style="width: 100%">
            </Modal>
          </FormItem>
          <FormItem label="描述" prop="content">
              <Input type="textarea" v-model="tableItem.content" placeholder="请输入租赁物品分类描述"></Input>
          </FormItem>
          <FormItem label="需要押金" prop="deposit">
              <input type="number" v-model="tableItem.deposit" placeholder="请输入所需要的押金" class="numberInput"/>
          </FormItem>
          <FormItem label="价格/小时" prop="price">
              <Input v-model="tableItem.price " placeholder="请输入每小时的价格"></Input>
          </FormItem>
          <!-- <FormItem label="规则" prop="rule">
            <Input type="textarea" v-model="tableItem.rule" placeholder="请输入租赁物品分类规则"></Input>
          </FormItem> -->
          <FormItem label="租赁品状态">
              <i-switch size="large" :value="tableItem.status" @on-change="tableItem.status=!tableItem.status"/>
          </FormItem>
          <!-- <FormItem label="库存状态" prop="cstatus">
            <Select v-model="tableItem.cstatus" clearable :label-in-value="true" placeholder="请选择库存状态" size="large" style="width:200px" @on-change="change04">
                <Option v-for="(item,index) in cstatusList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem> -->
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItem')">取消</Button>
        <Button type="primary" size="large" @click="Save('tableItem')">确定</Button>
      </div>
    </Modal>
    <Modal
        title="租赁物品库存管理"
        v-model="vivisle1"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset1('tableItem1')"
        class-name="vertical-center-modal">
        <Form ref="tableItem1" :model="tableItem1" :rules="ruleValidate1" :label-width="80">
          <FormItem label="编号" prop="code">
              <Input v-model="tableItem1.code" placeholder="请输入租赁物品库存编号"></Input>
          </FormItem>
          <FormItem label="库存状态" prop="status">
            <!-- :label-in-value="true" -->
            <Select v-model="tableItem1.status" clearable  placeholder="请选择库存状态" size="large" style="width:200px" @on-change="change05">
                <Option v-for="(item,index) in cstatusList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="所属租赁点" prop="bid">
            <Select v-model="tableItem1.bid" clearable  placeholder="请选择租赁点" size="large" style="width:200px" @on-change="change05">
                <Option v-for="(item,index) in businessList" :value="item.bid" :key="index">{{ item.name }}</Option>
            </Select>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset1('tableItem1')">取消</Button>
        <Button type="primary" size="large" @click="Save1('tableItem1')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "_c/tables";
import { leaseResD, leaseResS, leaseResL,typeB, areaB, businessB,leaseResDetailL,leaseResDetailS,leaseResDetailD} from "@/api/data";
export default {
  name: "Account",
  components: {
    tables: Tables
  },
  data() {
    const headerUrl = (rule, value, callback) => {
      setTimeout(res=>{
        if (this.tableItem.pic&&this.tableItem.pic.length>0) {
          callback();
        } else {
          callback(new Error("头像不能为空"));
        }
      },1000)
    };
    return {
      editType:'',
      stockShow:false,
      vivisle: false,
      vivisle1: false,
      visibleImg: false,
      // id
      itemId: "",
      itemId1: "",
      index: -1,
      index1: -1,
      // 详情
      tableItem: {
        lid: '',
        status:true
      },
      tableItem1: {},
      // 条件
      condition: {
        // category: 3,
        pageNum: 1,
        pageSize: 10
      },
      typeList: [],
      areaList: [],
      businessList: [],
      cstatusList: [
        {
          label: '下架',
          value: 0
        },
         {
          label: '可租',
          value: 1
        },
         {
          label: '在租',
          value: 2
        }
      ],
      // table表头
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          key: ""
        },
        {
          title: "租赁物品名称",
          key: "name"
        },
        {
          title: "封面",
          key: "pic",
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.pic
              },
              style: {
                width: '60px',
                height: '60px',
                margin: '18px 0',
              }
            });
          }
        },
        {
          title: "类型名称",
          key: "typename",
        },
        // {
        //   title: "所属租赁点区域名称",
        //   key: "areaname",
        // },
        // {
        //   title: "商家名称",
        //   key: "bname",
        // },
        {
          title: "价格/小时",
          key: "price",
        },
        // {
        //   title: "库存状态",
        //   key: "cstatus",
        // },
        {
          title: "租赁品状态",
          key: "status",
          render:(h,params)=>{
            let text = params.row.status ==1 ? '可用':'停用'

            return h('div',text)
          }
        },
        {
          title: '操作',
          key: 'handle',
          minWidth: 200,
          button: [
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px",
                      display: params.row.isTop==0 ? "inline-block" : 'none'
                    },
                    on: {
                      click: () => {
                        let obj = params.row
                        obj.isTop = 1
                        this.saveTop(obj)
                      }
                    }
                  },
                  "置顶"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px",
                      display: params.row.isTop==1 ? "inline-block" : 'none'
                    },
                    on: {
                      click: () => {
                        let obj = params.row
                        obj.isTop = 0
                        this.saveTop(obj)
                      }
                    }
                  },
                  "取消置顶"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        this.vivisle1 = true
                        this.index1=params.index
                        this.tableItem1.lid = params.row.lid;
                      }
                    }
                  },
                  "新增库存"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        // this.index = params.index
                        this.stockShow = true
                        this.itemId1 = params.row.lid
                        this.tableItem1.lid = params.row.lid;
                        this.List1()
                        this.tableData1 = params.row.children&&params.row.children.length>0 ? params.row.children:[]
                        // this.tableData1.forEach(ele => {
                        //   if(ele.status == '可用'){
                        //     ele.status = 1
                        //   } else if(ele.status == '在租'){
                        //     ele.status = 2
                        //   }else if(ele.status == '下架'){
                        //     ele.category = 0
                        //   }
                        // });
                      }
                    }
                  },
                  "查看库存"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        this.$set(this,'editType',1)
                        this.itemId = params.row.id;
                        let item = JSON.parse(JSON.stringify(params.row))
                        this.tableItem = item
                        this.tableItem.deposit = item.deposit.toString()
                        this.tableItem.price   = item.price.toString()
                        // for (const key in params.row) {
                        //   if(key == 'status'){
                        //     this.tableItem.status = params.row[key] == 1 ? true : false
                        //   }else{
                        //     let item = params.row
                        //     this.tableItem[key] = item[key] ? item[key].toString() : item[key]
                        //   }
                        // }
                        // deposit ，price

                        this.tableItem.status = params.row.status == 1 ? true : false
                        delete this.tableItem.children

                        this.Query(this.tableItem);
                      }
                    }
                  },
                  "编辑"
                )
              ];
            },
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      this.itemId = params.row.lid;
                      this.Delete();
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px",
                      marginBottom: "5px"
                      }
                    },
                    "删除"
                  )
                ]
              );
            }
          ]
        }
      ],
      columns1: [
        {
          type: "index",
          width: 60,
          align: "center",
          key: ""
        },
        {
          title: "租赁品详情编号",
          // width:300,
          key: "code"
        },
         {
          title: "所在租赁点",
          // width:300,
          key: "bname"
        },
        {
          title: "租赁物品状态",
          width:130,
          key: "status",
          render:(h,params)=>{
            let text = ''
            switch (params.row.status) {
              case 0:
                text = '下架'
                break;
              case 1:
                text = '可租'
                break;
              case 2:
                text = '在租'
                break;
              default:
                break;
            }
            return h('div',text)
          }
        },
        {
          title: '操作',
          key: 'handle',
          minWidth: 100,
          button: [
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "10px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        this.$set(this,'editType',2)
                        let item = JSON.parse(JSON.stringify(params.row))
                        this.itemId1 = item.lid;
                        this.tableItem1.lid = item.lid
                        this.tableItem1.did = item.did
                        this.tableItem1.bid = item.bid
                        this.tableItem1.code = item.code
                        this.tableItem1.status = item.status
                        // this.tableItem1.status = item.status == 1 ? true : false

                        this.Query1(this.tableItem);
                      }
                    }
                  },
                  "编辑"
                )
              ];
            },
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      this.itemId1 = params.row.did;
                      this.Delete1();
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px",
                      marginBottom: "5px"
                      }
                    },
                    "删除"
                  )
                ]
              );
            }
          ]
        }
      ],
      // table数据
      tableData: [],
      tableData1: [],
      // 分页数据
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      ruleValidate: {
        typeid: [
          {
            required: true,
            message: "请选择相应类型",
            trigger: "change"
          }
        ],
        pic: [{ required: true, validator: headerUrl, trigger: "change,blur" }],
        areaid: [
          {
            required: true,
            message: "请选择所属租赁点",
            trigger: "change"
          }
        ],
        bid: [
          {
            required: true,
            message: "请选择商家",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ],
        deposit: [
          {
            required: true,
            message: "请输入所需押金",
            trigger: "blur"
          }
        ],
        price: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur"
          }
        ],
        rule: [
          {
            required: true,
            message: "规则不能为空",
            trigger: "blur"
          }
        ],
        cstatus: [
          {
            required: true,
            message: "请选择库存状态",
            trigger: "change"
          }
        ]
      },
      ruleValidate1: {
        code: [
          {
            required: true,
            message: "租赁品库存编号不能为空",
            trigger: "blur"
          }
        ],
        status:[
          {
            required: true,
            message: "请选择库存状态",
            trigger: "change",
            type:'number'
          }
        ],
        bid:[
          {
            required: true,
            message: "请选择租赁点",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch:{
    tableItem() {
    }
  },
  mounted() {
    this.List();
    this.ListT();
    this.ListB();
    this.ListA();
  },
  methods: {
    handleReset (name) {
      this.vivisle = false
      this.$refs[name].resetFields();
      this.$set(this,'tableItem',{
        lid: '',
        status:true
      })
    },
    handleReset1 (name) {
      this.vivisle1 = false
      this.$refs[name].resetFields();
      this.tableItem1 = {}
    },
    pageSize(value) {
      this.condition.pageSize = value
      this.condition.pageNum = 1
      this.List()
    },
    pageNum(value) {
      this.condition.pageNum = value
      this.List()
    },
    change1 (item) {
      if(item){
        this.condition.typeid = item
      }
    },
    change2 (item) {
      if(item){
        this.condition.areaid = item
      }
    },
    change3 (item) {
      if(item){
        this.condition.bid = item
      }
    },
    change01 (item) {
      if(item&&item.value) {
        this.tableItem.typeid = item.value
        this.tableItem.typename  = item.label
      }
    },
    change02 (item) {
      if(item&&item.value) {
        this.tableItem.areaid = item.value
        this.tableItem.areaname = item.label
      }
    },
    change03 (item) {
      if(item&&item.value) {
        this.tableItem.bid = item.value
        this.tableItem.bname = item.label
      }
    },
    change04 (item) {
      if(item&&item.value){
        this.tableItem.cstatus = item.value
      }
    },
    change05 (item) {
      // if(item&&item.value){
      //   this.tableItem1.status = item.value
      // }
    },
    ListT() {
      var obj = {
        status: 1,
        category: 1
      }
      typeB(obj).then(res => {
        if (res.code==1) {
        this.typeList = res.data
        }
      });
    },
    ListB() {
      var obj = {
        status: 1,
        category: 0
      }
      businessB(obj).then(res => {
        if (res.code==1) {
        this.businessList = res.data
        }
      });
    },
    ListA() {
      var obj = {
        status: 1,
        category: 2
      }
      areaB(obj).then(res => {
        if (res.code==1) {
        this.areaList = res.data
        }
      });
    },
    handleView() {
      this.visibleImg = true;
    },
    handleRemove() {
      this.tableItem.pic = "";
    },
    handleSuccess(res, file) {
      this.$set(this.tableItem,'pic',res.data)
      this.tableItem.pic = res.data;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: ""
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件超出2M范围"
      });
    },
    // 分页数据获取
    List() {
      leaseResL(this.condition).then(res => {
        if (res.code==1) {
        let { data, total } = res.data;
        this.tableData = data;
        this.page.total = total;
        }
      });
    },
    List1(index) {
      var obj = {
        lid: this.itemId1,
        // status: 1
      }
      leaseResDetailL(obj).then(res => {
        if (res.code==1) {
        this.tableData1 = res.data
        // this.tableData1.forEach(ele => {
        //   if(ele.status == 1){
        //     ele.status = '可用'
        //   } else if(ele.status == 2){
        //     ele.status = '在租'
        //   }else if(ele.status == 0){
        //     ele.status = '下架'
        //   }
        // });
        }
      })
    },
    Query() {
      this.vivisle = true
    },
    Query1() {
      this.vivisle1 = true
    },
    // 保存
    Save(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = {}
          for(var key in this.tableItem){
            obj[key] = this.tableItem[key]
          }
          obj.status = obj.status == true ? 1: 0
          leaseResS(obj).then(res => {
            if (res.code === 1) {
              this.List();
              this.handleReset(name)
            }
          });
        }
      });
    },
    saveTop(obj) {
      leaseResS(obj).then(res => {
        if (res.code === 1) {
          this.List();
        }
      });
    },
    Save1(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItem1
          leaseResDetailS(obj).then(res => {
            if (res.code === 1) {
              this.vivisle1 = false
              this.handleReset1(name)
              if (this.editType==1) {
                this.List();
              } else {
                this.List1()
              }
            }
          });
        }
      });
    },
    // 删除
    Delete() {
      leaseResD({ id: this.itemId }).then(res => {
        if (res.code === 1) {
          this.itemId = "";
          this.List()
        }
      });
    },
    Delete1() {
      leaseResDetailD({ did: this.itemId1 }).then(res => {
        if (res.code === 1) {
          this.itemId1 = "";
          this.List1();
        }
      });
    }
  }
};
</script>
